.Button {
  cursor: pointer;
  padding: 6px 15px;
  color: var(--primary-color);

  &:hover {
    opacity: 0.8;
    fill-opacity: 0.8;
    stroke-opacity: 0.8;
  }
}

.clearInverted,
.clear {
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.clearInverted {
  color: var(--inverted-primary-color);
}

.outline {
  color: var(--primary-color);
  background: none;
  border: 1px solid var(--primary-color);
}

.outline_red {
  color: var(--red-light);
  background: none;
  border: 1px solid var(--red-light);
}

.background {
  color: var(--primary-color);
  background-color: var(--bg-color);
  border: none;
}

.backgroundInverted {
  color: var(--inverted-primary-color);
  background-color: var(--inverted-bg-color);
  border: none;
}

.square {
  padding: 0;
}

.square.size_m {
  width: var(--font-line-m);
  height: var(--font-line-m);
  font: var(--font-m);
}

.square.size_l {
  width: var(--font-line-l);
  height: var(--font-line-l);
  font: var(--font-l);
}

.square.size_xl {
  width: var(--font-line-xl);
  height: var(--font-line-xl);
  font: var(--font-xl);
}

.size_m {
  font: var(--font-m);
}

.size_l {
  font: var(--font-l);
}

.size_xl {
  font: var(--font-xl);
}

.disabled {
  opacity: 0.5;
}

.fullWidth {
  width: 100%;
}
